<template>
  <div>
    <Top title="找回密码" iconShow="1"></Top>
    <div class="formright">
      <div class="formright-tel">
        <div class="formright-tel-icon">
          <i class="iconfont icon-shouji"></i>
        </div>
        <div class="formright-tel-input">
          <mt-field label="" :attr="{maxlength:11}" placeholder="请输入11位手机号" v-model="formdata.tel">
          </mt-field>
        </div>
      </div>
      <div style="height:50px;">
        <div class="formright-code" style="width: 5.4rem;display:flex">
          <div class="formright-code-icon">
            <i class="iconfont icon-dunpai1"></i>
          </div>
          <div class="formright-password-input">
            <mt-field :attr="{maxlength:4}" placeholder="请输入4位验证码" type="text" v-model="formdata.validateCode"></mt-field>
          </div>
        </div>
        <div class="getcode" style="oveflow:hidden;" @click="getImgCode" v-bind:class="{'getcodeA': flag, 'getcodeB': !flag}">{{codeTime}}</div>
      </div>
      <div class="formright-password">
        <div class="formright-tel-icon">
          <i class="iconfont icon-suo"></i>
        </div>
        <div class="formright-tel-input">
          <mt-field :attr="{maxlength:16}" label="" placeholder="请输入6~16位字符新密码" v-model="formdata.password" type="password">
          </mt-field>
        </div>
      </div>
      <mt-button type="primary" @click="finish">完成</mt-button>
    </div>
    <div class="verifycode-modelF" v-if="verifyShow">
      <div class="verifycode-modelF-inner">
        <div class="verifycode-modelF-inner-top">请输入图形验证码
          <i class="iconfont icon-guanbi" @click="closeModel"></i>
        </div>
        <div class="verifycode-modelF-inner-content">
          <input type="text" v-model="formdata.verifyCode" />
          <img :src="codePic" @click="verifyCode" />
        </div>
        <div class="verifycode-modelF-inner-footer" @click="startTime">确定</div>
      </div>
    </div>
  
  </div>
</template>
<script>
import { MessageBox } from 'mint-ui'
import Top from '../components/Header'
export default {
  name: 'login',
  data() {
    return {
      formdata: {
        tel: '',
        password: '',
        validateCode: ''
      },
      codeTime: '获取验证码',
      flag: true,
      iconShow: true,
      codePic: "/loansupermarket-app/img/getVerifyCode?num=" + Math.random(),
      verifyShow: false
    }
  },
  components: { Top },
  mounted(){
    document.setTitle('找回密码');
  },
  methods: {
    getImgCode() {
      this.formdata.verifyCode = '';
      if (this.formdata.tel == "") {
        MessageBox.alert('手机号码不能为空~', '提示');
        return;
      } else if (!(/^1[34578]\d{9}$/.test(this.formdata.tel))) {
        MessageBox.alert('手机号码输入有误~', '提示');
        return;
      } else {
        // 重新获取验证码
        this.verifyCode();
        if (this.flag) {
          this.verifyShow = true;
        }


      }
    },
    closeModel() {
      this.verifyShow = false;
    },
    verifyCode() {
      this.codePic = "/loansupermarket-app/img/getVerifyCode?num=" + Math.random();
    },
    // 获取验证码按钮短信60s
    getCode() {
      if (!(/^1[34578]\d{9}$/.test(this.formdata.tel))) {   //正则判断手机号码是否正确
        MessageBox('提示', '手机号码输入有误~');
        return
      }

      this.flag = !this.flag;
      let time = 60;
      let that = this;
      if (!this.flag) {
        var timer = setInterval(function () {
          time -= 1;
          that.codeTime = time + 's后可重新获取';
          if (time == 0) {
            clearInterval(timer);
            that.codeTime = '获取验证码'
            that.flag = true;
          }
        }, 1000)
      }

      // 获取短信验证码接口参数
      let postData = {
        phone: this.formdata.tel,
        smsType: 2,
        imgCode: this.formdata.verifyCode
      }


      // 调用短信验证码接口
      this.$http.get('/loansupermarket-app/sms/sendSmsByImg?phone='+postData.phone+'&smsType='+postData.smsType+'&imgCode='+postData.imgCode)
        .then((response) => {
          var resBody = response.body;
          if (resBody.code == '000') {
            // alert(resBody.msg)
          } else {
            this.flag = !this.flag;
            MessageBox.alert(resBody.msg, '提示');
            clearInterval(timer);
            that.codeTime = '获取验证码'
          }
        })
    },
    startTime(flag) {
      this.verifyShow = false;



      // 短信60s
      if (flag) {
        this.getCode();
      }
    },
    finish() {
      this.findPassword();
    },
    // 找回密码
    findPassword() {
      // 找回密码接口参数
      let postDataF = {
        phone: this.formdata.tel,
        pwd: this.formdata.password,
        code: this.formdata.validateCode
      }
      if (!this.formdata.tel) {
        MessageBox('提示', '手机号码不能为空~');
      } else if (!(/^1[34578]\d{9}$/.test(this.formdata.tel))) {
        MessageBox('提示', '请输入正确的手机号码~');
      } else if (!this.formdata.validateCode) {
        MessageBox('提示', '验证码不能为空~');
      } else if(postDataF.password.length < 6){
        MessageBox('提示', '密码长度必须是6-16位');
      }else {
        // 调用找回密码接口
        this.$http.post('/loansupermarket-app/user/resetPwd', postDataF)
          .then((response) => {
            var resBody = response.body;
            if (resBody.code == '000') { //验证码手机号输入都正确
              this.$router.go(-1);
            } else if (resBody.code == '111') {  //验证码错误
              MessageBox.alert(resBody.mesg);
            }
          }).catch(function () {
            MessageBox.alert("接口请求失败!")
          });
      }

    }
  }
}
</script>
<style lang="scss">
@import '../scss/variable/base.scss';
.formright {
  width: 90%;
  margin: 0.4rem auto;
  padding-top: 1.2rem !important;
  .iconfont {
    color: #999999;
  }
  &-tel {
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border-radius: 4px;
    width: 100%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    &-icon {
      flex: 1.2;
      margin-bottom: 2px;
      height: 100%;
      .iconfont {
        vertical-align: -10%;
      }
    }
    &-input {
      flex: 10.8;
      margin-top: -0.05rem;
    }
  }
  &-password {
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.1);
    margin-top: 0.6rem;
    overflow: hidden;
    border-radius: 4px;
    width: 100%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    &-icon {
      flex: 1.2;
      margin-bottom: 2px;
    }
    &-input {
      flex: 10.8;
       margin-top: -0.05rem;
    }
  }
  &-code {
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.1);
    float: left;
    overflow: hidden;
    border-radius: 4px;
    margin-top: 0.35rem;
    width: 5.4rem;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    &-icon {
      width: 16.5%; 
      margin-top: 3px;
      vertical-align: 20%;
    }
    &-input {
      flex: 80%;
    }
  }
  .mint-button {
    margin-top: 0.9rem;
    width: 9rem;
    height: 1.2rem;
   
  }
  .association {
    text-align: left;
    font-size: 0.33rem;
    i:nth-child(1) {
      color: $primaryColor;
      vertical-align: -3%;
      font-size: 0.36rem;
    }
    i:nth-child(2) {
      color: $primaryColor;
      vertical-align: -4%;
      font-size: 0.36rem;
    }
    a {
      color: $primaryColor;
      text-decoration: underline;
    }
  }
}

.getcode {
  float: right;
  width: 3.34rem;
  height: 48px;
  // background: $primaryColor;
  background: -webkit-linear-gradient(left, #2ce9e8, #7dd7ff) !important;
  display: inline-block;
  line-height: 47px;
  border-radius: 4px;
  margin-top: 0.35rem;
  font-size: 0.36rem;
  color: #fff;
}

.getcodeB {
  overflow: hidden;
  float: right;
  width: 3.34rem;
  height: 48px;
  background: $borderColor;
  display: inline-block;
  line-height: 47px;
  border-radius: 4px;
  margin-top: 0.35rem;
  font-size: 0.36rem;
  color: #fff;
  img {
    width: 100%;
    height: 100%;
  }
}

.verifycode-modelF {

  width: 100%;
  height: 100Vh;
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  left: 0;
  z-index: 11;
  text-align: left;
  top: 0;
  &-inner {
    border-radius: 0.12rem;
    overflow: hidden;
    width: 8rem;
    height: 5.3rem;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    &-top {
      width: 100%;
      height: 1.5rem;
      background: #d8fcff;
      font-size: 0.45rem;
      box-sizing: border-box;
      padding-left: 0.34rem;
      color: gary;
      padding-top: 0.25rem;
      text-align: center;
      line-height: 1rem;
      color: #000000;
      .iconfont {
        position: absolute;
        right: 0.34rem;
        top: 0.3rem;
        font-size: 0.6rem;
      }
    }
    &-content {
      box-sizing: border-box;
      padding: 0.8rem 0.4rem 1.2rem 0.4rem;
      input {
        width: 4.5rem;
        box-sizing: border-box;
        padding-left: 0.34rem;
        border: 1px solid #aaaaaa;
        outline: none;
        border-radius: 0.12rem;
        height: 1rem;
        float: left;
      }
      img {
        float: right;
        background: #d8fcff;
        width: 2.5rem;
        height: 1rem;
      }
    }
    &-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 1.2rem;
      // background: $primaryColor;
      background: -webkit-linear-gradient(right, #37c4d2, #6be3e6) !important;
      width: 100%;
      text-align: center;
      font-size: 0.45rem;
      line-height: 1.2rem;
      color: #fff;
    }
  }
}
</style>

